<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>手机端菜单-动态数据版 (vue 定义数据模拟) </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/vue.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/mobile-menu.js"></script>
    <link rel="stylesheet" href="css/mobile-menu.css"/>
</head>
<body>

展开/收起菜单 <span onclick="$('.mobileMenu').toggle(300)" style="color: #00adb5"> 点我 </span>
<!-- 手机端菜单-->
<div id="app">
    <div class="mobileMenu">
        <li v-for="(item,index) in menus">
            <a href="javacript:void(0)">{{ item.name }} </a>
            <img src="icon/el-icon-arrow-right.png" v-if="item.children!=null" :id="'menu-icon-' + item.id" @click="clickIconHandle(item.id)">
            <ul :id="'menu-'+ item.id " hidden>
                <li v-for="(itemTwo ,index) in item.children">
                    <a href="javacript:void(0)"> {{ itemTwo.name }} </a>
                    <img src="icon/el-icon-arrow-right.png" v-if="itemTwo.children!=null" :id="'menu-icon-' + itemTwo.id" @click="clickIconHandle(itemTwo.id)">
                    <ul :id="'menu-'+ itemTwo.id" hidden>
                        <li v-for="(itemThree ,index) in itemTwo.children"><a href="javacript:void(0)"> {{ itemThree.name}} </a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </div>
</div>
</body>

<script>
    var vm = new Vue({
        // 绑定 id="app" 的元素
        el: "#app",
        // 定义数据
        // config: config,
        data: {
            /* 数据开始 */
            menus: [
                {
                    id: 1,
                    name: '菜单1',
                    children: null
                },
                {
                    id: 2,
                    name: '菜单2',
                    children: [
                        {
                            id: 21,
                            name: '菜单2-1',
                            children: [
                                {
                                    id: 211,
                                    name: '菜单2-1-1',
                                    children: null
                                },
                                {
                                    id: 212,
                                    name: '菜单2-1-2',
                                    children: null
                                },
                                {
                                    id: 213,
                                    name: '菜单2-1-3',
                                    children: null
                                },
                            ]
                        },
                        {
                            id: 22,
                            name: '菜单2-2',
                            children: null
                        },
                    ]
                }
            ]
            /* 数据结束*/
        }
    })
</script>
</html>